<template>
  <div class="org-chart">
    <div class="root">
      <org-node :name="root.name" :children="root.children" />
    </div>
    <div class="controls">
      <button @click="addChild">添加下级</button>
      <button @click="showRenameDialog">修改名称</button>
    </div>
    <dialog v-if="showDialog" @close="showDialog = false">
      <label for="new-name">新名称：</label>
      <input id="new-name" v-model="newName" />
      <button @click="rename">确定</button>
    </dialog>
  </div>
</template>
  
<script>
import { ref } from 'vue';

export default {
  name: 'OrgChart',
  data() {
    return {
      root: {
        name: '公司名称',
        children: [],
      },
      newName: '',
      showDialog: false,
    };
  },
  methods: {
    addChild() {
      const id = Math.random().toString(36).substr(2, 9);
      const newChild = {
        id,
        name: '新节点',
        children: [],
      };
      this.root.children.push(newChild);
    },
    showRenameDialog() {
      this.showDialog = true;
    },
    rename() {
      this.root.name = this.newName;
      this.showDialog = false;
    },
  },
};
</script>
  
<style>
.org-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 16px;
}

.root {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.controls {
  margin-top: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>